<template>
	<view class="content">
		<view class="header">
			<image src="/static/shilu-login/logo.png"></image>
		</view>

		<view class="list">
			<view class="list-call">
				<image class="img" src="/static/shilu-login/1.png"></image>
				<input class="biaoti" v-model="username" type="text" maxlength="11" placeholder="用户名" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/2.png"></image>
				<input class="biaoti" v-model="password" type="text" maxlength="32" placeholder="密码" :password="!showPassword" />
				<image class="img" :src="showPassword?'/static/shilu-login/op.png':'/static/shilu-login/cl.png'" @tap="display"></image>
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/3.png"></image>
				<input class="biaoti" v-model="password1" type="text" maxlength="32" placeholder="确认密码" :password="!showPassword1" />
				<image class="img" :src="showPassword1?'/static/shilu-login/op.png':'/static/shilu-login/cl.png'" @tap="display1"></image>
				<!-- <view class="yzm" :class="{ yzms: second>0 }" @tap="getcode">{{yanzhengma}}</view> -->
			</view>
		</view>

		<button class="dlbutton" hover-class="dlbutton-hover" open-type="getPhoneNumber" @getphonenumber="bindLogin">
			<text>注册</text>
		</button>

		<view class="xieyi">
			<navigator url="/pages/tabbar/shilu-login/login" open-type="navigate">已有账号</navigator>
		</view>
	</view>
</template>

<script>
	var tha, js;
	export default {
		onLoad() {
			tha = this;

		},
		onUnload() {
			clearInterval(js)
		},
		data() {
			return {
				username: '',
				password: '',
				password1: '',
				showPassword: false,
				showPassword1: false,
			};
		},
		computed: {},
		methods: {
			display() {
				this.showPassword = !this.showPassword
			},
			display1() {
				this.showPassword1 = !this.showPassword1
			},
			bindLogin(e) {
				console.log(e);
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					if (this.username.length == 0) {
						uni.showToast({
							icon: 'none',
							title: '用户名不能为空'
						});
						return;
					}
					if (this.password != this.password1) {
						uni.showToast({
							icon: 'none',
							title: '两次输入密码不一致'
						});
						return;
					}
					uni.navigateTo({
						url: "/pages/tabbar/shilu-login/blog" 					
					})
					// uni.request({
					// 	url: 'http://***/reg.html',
					// 	data: {
					// 		username: this.username,
					// 		password: this.password,
					// 		password1: this.password1,
					// 	},
					// 	method: 'POST',
					// 	dataType: 'json',
					// 	success: (res) => {
					// 		if (res.data.code != 200) {
					// 			uni.showToast({
					// 				title: res.data.msg,
					// 				icon: 'none'
					// 			});
					// 		} else {
					// 			uni.showToast({
					// 				title: res.data.msg
					// 			});
					// 			setTimeout(function() {
					// 				uni.navigateBack();
					// 			}, 1500)
					// 		}
					// 	}
					// });
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.header {
		width: 161upx;
		height: 161upx;
		background: rgba(63, 205, 235, 1);
		box-shadow: 0upx 12upx 13upx 0upx rgba(63, 205, 235, 0.47);
		border-radius: 50%;
		margin-top: 30upx;
		margin-left: auto;
		margin-right: auto;
	}

	.header image {
		width: 161upx;
		height: 161upx;
		border-radius: 50%;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50upx;
		padding-left: 70upx;
		padding-right: 70upx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		color: #333333;
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
	}

	.list-call .img {
		width: 40upx;
		height: 40upx;
	}

	.list-call .biaoti {
		flex: 1;
		text-align: left;
		font-size: 32upx;
		line-height: 100upx;
		margin-left: 16upx;
	}

	.yzm {
		color: #FF7D13;
		font-size: 24upx;
		line-height: 64upx;
		padding-left: 10upx;
		padding-right: 10upx;
		width: auto;
		height: 64upx;
		border: 1upx solid #FFA800;
		border-radius: 50upx;
	}

	.yzms {
		color: #999999 !important;
		border: 1upx solid #999999;
	}

	.dlbutton {
		color: #FFFFFF;
		font-size: 34upx;
		width: 470upx;
		height: 100upx;
		background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
		box-shadow: 0upx 0upx 13upx 0upx rgba(164, 217, 228, 0.2);
		border-radius: 50upx;
		line-height: 100upx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100upx;
	}

	.dlbutton-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.9), rgba(188, 226, 158, 0.9));
	}

	.xieyi {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30upx;
		margin-top: 80upx;
		color: #FFA800;
		text-align: center;
		height: 40upx;
		line-height: 40upx;
	}

	.xieyi image {
		width: 40upx;
		height: 40upx;
	}
</style>
